<template>
  <div class="uploadimg">
    <!--
       action 上传地址
       show-file-list  是否显示上传列表
       onSuccess 上传成功后触发
       beforeUpload 上传之前
       -->
    <el-upload action="#" class="upload">
      <div class="del" @click.stop.prevent="remove">x</div>
      <div class="box">
        <img :src="imgUrl" alt="" v-if="imgUrl" />
        <i class="el-icon-circle-plus-outline"></i>
      </div>
    </el-upload>
  </div>
</template>

<script>
export default {
  props: ['imgUrl'],
  model: {
    prop: 'imgUrl',
    event: 'input'
  },
  name: 'uploadImg',
  data () {
    return {}
  },
  methods: {
    remove () {
      this.$emit('input', '')
    }
  }
}
</script>

<style lang="scss" scoped>
.upload {
  position: relative;
  width: 300px;
  height: 300px;
  border: 2px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  .del {
    display: none;
    color: red;
    font-size: 20px;
  }
  .box {
    width: 300px;
    height: 300px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  &:hover {
    .del {
      display: block;
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>
